<template>
	<view class="contaner">
		<view class="header">
			<view class="header_left" @click="to(pro)">
				<image class="avatar" :src="pro.avater" mode="aspectFill"></image>
				{{pro.nickname}}
			</view>
			<view class="header_right">
				{{pro.create_at}}
				<image v-if="ismy" @click.stop="del(pro)" style="width: 31rpx;height: 31rpx;margin-left: 37rpx;" src="./static/del.png" mode=""></image>
			</view>
		</view>
		<view class="" @click="to(pro)">
			<view class="flex jsb">
				<view class="type">
					#{{pro.typename}}项目#
				</view>
				<view class="title">
					{{pro.title}}
				</view>
			</view>
			<view class="info">
				{{pro.content}}
			</view>
		</view>

		<view class="pic">
			<u-album :urls="pro.imgs" multipleSize='221rpx' space='13rpx' :singleMode='"aspectFill"'></u-album>
		</view>
		<view class="flex jsb">
			<view class="inputbox" @click.stop="fabu(pro)">
				发布评论..
			</view>
			<view class="pinglun" @click="to(pro)">
				<image style="width: 30rpx;height: 28rpx;margin-right: 15rpx;" src="/static/img/liaotian.png" mode="">
				</image>
				{{pro.num}}
			</view>

		</view>
		<view class="line">

		</view>
	</view>
</template>

<script>
	export default {
		name: "project-item",
		props: {
			pro: {
				type: Object,
				default () {
					return {

					};
				}
			},
			index: {
				type: Number,
				default () {
					return {

					}
				}
			},
			ismy: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			fabu(item) {
				this.$emit('fabu', item)
			},
			to(item) {
				uni.navigateTo({
					url: '/pages/project/detail?id='+item.id
				})
				// console.log(item)
			},
			del(item){
				this.$emit('del', item)
			}
		},
		onLoad() {
			
		}
	}
</script>

<style lang="less">
	.contaner {
		padding: 23rpx 30rpx;

		.header {
			padding: 0 1rpx 0 6rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 25rpx;

			.header_left {
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 30rpx;

				.avatar {
					width: 56rpx;
					height: 56rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}
			}

			.header_right {
				font-size: 26rpx;
				color: #949492;
				display: flex;
				align-items: center;
			}

		}

		.type {
			font-size: 32rpx;
			color: #FF7D12;
			line-height: 64rpx;
			background: rgba(255, 123, 38, 0.2);
			padding: 0 20rpx;
			border-radius: 10rpx;
			margin-left: 7rpx;
		}

		.title {
			color: #333;
			font-size: 32rpx;
		}

		.info {
			font-size: 30rpx;
			color: #333;
			padding-left: 10rpx;
			margin-top: 24rpx;
			margin-bottom: 20rpx;
			line-height: 45rpx;
		}

		.pic {
			margin-bottom: 36rpx;
		}

		.inputbox {
			flex: 1;
			margin-right: 19rpx;
			padding-left: 43rpx;
			line-height: 63rpx;
			color: #949492;
			font-size: 28rpx;
			background-color: #f9f9f9;
			border-radius: 32rpx;
		}

		.pinglun {
			display: flex;
			align-items: center;
			color: #949492;
			font-size: 24rpx;

		}

		.line {
			width: 690rpx;
			height: 3rpx;
			background: #fdfdfd;
			margin: 0 auto;
		}

		/deep/.u-album__row__wrapper {
			border-radius: 15rpx;
			overflow: hidden;
		}


		.flex {
			display: flex;
			align-items: center;
		}

		.jsb {
			justify-content: space-between;
		}

	}
</style>
